<template>
  <div class="home hide-scroller-bar">
    <template v-if="showPageCenter">
      <div class="page-center">
        <a-row class="center">
          <a-col class="title" v-if="config.basic && config.basic.system_name">
            <span v-if="pageTitle">
              <span v-html="pageTitle"></span>
            </span>
            <span v-else>
              {{
                aiTxt
                  ? config.basic.system_name.slice(0, -2)
                  : config.basic.system_name
              }}
              <span class="ai-text">{{ aiTxt ? aiTxt : "AI" }}</span>
            </span>
            <span>创作平台</span>
          </a-col>
          <a-col class="sub_title"
            >{{ aiConfig.page_subtitle || "用AI提高10倍工作和企业营销效率" }}
          </a-col>
          <a-col
            class="introduction"
            v-if="config.basic && config.basic.system_name"
          >
            <span v-if="aiConfig.page_content">
              {{ aiConfig.page_content }}
            </span>
            <span v-else>
              用{{
                aiTxt
                  ? config.basic.system_name.slice(0, -2)
                  : config.basic.system_name
              }}{{
                aiTxt ? aiTxt : "AI"
              }}可以进行AI对话、AI创作、AI绘画、AI训练，内置智能对话机器人、图片设计、AI模型训练、文案生成、方案创作、营销内容创作等数十项AIGC功能，并且包含海量提示词和AI模型库
            </span>
          </a-col>
          <a-col>
            <a-button class="btn-enter" type="primary" @click="goAi"
              >进入体验AI <ArrowRightOutlined class="arrow-icon" />
            </a-button>
          </a-col>
        </a-row>
        <a-row justify="space-between" v-if="cardList.length > 0">
          <a-col v-for="(card, index) in cardList" :key="index">
            <a-card
              :style="{ width: cardList.length == 5 ? '220px' : '265px' }"
              class="card"
              hoverable
              @click="card.clickEvent()"
              :bodyStyle="{ padding: '20px' }"
            >
              <div
                class="card-item"
                :style="{ height: cardList.length == 5 ? '213px' : '253px' }"
              >
                <div>
                  <cu-icon class="icon card-icon" :type="card.icon"></cu-icon>
                  <div class="card-center">
                    <div class="title">{{ card.title }}</div>
                    <div class="sub_title">{{ card.sub_title }}</div>
                  </div>
                </div>
                <div>
                  <a-button class="btn" type="primary"
                    >{{ card.btn_text }} <ArrowRightOutlined
                  /></a-button>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <div class="additional-info" v-if="config.basic || aiConfig.about_url">
          <span
            style="margin-right: 10px;"
            @click="openUrl('https://beian.miit.gov.cn/')"
            v-if="config.basic.system_domain_icp"
            >{{ config.basic.system_domain_icp }}</span
          >
          <span
            style="margin-left: 10px; margin-right: 10px;"
            @click="openUrl('http://www.beian.gov.cn/ ')"
            v-if="config.basic.system_domain_police"
            >{{ config.basic.system_domain_police }}</span
          >
          <span
            style="margin-left: 10px"
            @click="openUrl(aiConfig.about_url)"
            v-if="aiConfig.about_url"
            >关于我们</span
          >
        </div>
      </div>
    </template>

    <LoginModal
      :visible="loginVisible"
      @onClose="loginVisible = false"
      @loginCallback="loginCallback"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { ArrowRightOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "OrderSetting",
  components: { ArrowRightOutlined },

  setup() {
    const route = useRoute();
    const router = useRouter();

    const sceneRoute = ref(""); //场景式创作动态路由

    const state = reactive({
      showPageCenter: false,
      cardList: [
        {
          title: "对话式创作",
          sub_title: "通过开放式的对话模式进行创作",
          btn_text: "开始提问",
          icon: "icon-10dialogue",
          clickEvent() {
            router.push({ name: "Chat" });
          },
        },
        {
          title: "场景式创作",
          sub_title: "提供丰富的预置场景进行快速创作",
          btn_text: "开始创作",
          icon: "icon-changjing",
          clickEvent() {
            router.push({ name: "Create" });
          },
        },

        {
          title: "企业应用模型创作",
          sub_title: "通过AI预先设定的企业场景模板，进行选择式快速精准应用",
          btn_text: "开始创作",
          icon: "icon-moxing",
          clickEvent() {
            router.push({ name: "ApplicationHome" });
          },
        },
        {
          title: "内容训练",
          sub_title:
            "把企业的内容投喂给AI机器人，训练AI机器人，让机器人可以在对话中回复自有相关内容",
          btn_text: "开始训练",
          icon: "icon-huati",
          clickEvent() {
            utils.checkLogin().then((isLogin) => {
              if (!isLogin) {
                state.loginVisible = true;
                return;
              }
              router.push({ name: "TrainingHome" });
            });
          },
        },
      ],
      loginVisible: false,
      config: {},
      aiTxt: "",

      pageTitle: "",
      aiConfig: {},
    });

    const goAi = () => {
      router.push("/chatModel/chat");
    };

    const getApplicationList = () => {
      request.get("/work_ai", "/application/category/list", {}).then((res) => {
        if (res.list && res.list.length > 0) {
          sceneRoute.value = `scene${res.list[0].id}`;
        }
      });
    };

    const loginCallback = () => {
      state.loginVisible = false;
      router.go(0);
    };

    const formatPageTitle = (text) => {
      if (!text) return;
      if (text.indexOf("AI") >= 0) {
        text = text.replace(
          "AI",
          "<span style='padding:0 5px;color: rgb(255, 101, 98);font-weight: bold;line-height: 60px;background: linear-gradient(47deg, #6554ff 0%,#f26dbe 57.0068359375%,#febd7f 91.357421875%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'>" +
            "AI" +
            "</span>"
        );
      }
      state.pageTitle = text;
    };

    const refresh = () => {
      router.go(0);
    };

    const init = () => {
      getApplicationList();
      store.dispatch("GetConfigInfo").then((config) => {
        if (config && config.basic && config.basic.system_name) {
          if (
            config.basic &&
            config.basic.system_name.slice(-2) &&
            config.basic.system_name.slice(-2) == "AI"
          ) {
            state.aiTxt = config.basic.system_name.slice(-2);
          }
          state.config = config;
        }
      });
      store.dispatch("getAiConfig").then((aiConfig) => {
        if (aiConfig) {
          state.aiConfig = aiConfig;
          if (aiConfig.page_title) {
            formatPageTitle(aiConfig.page_title);
          } else {
            formatPageTitle();
          }

          if (aiConfig.ai_draw_open) {
            state.cardList.push({
              title: "AI绘画",
              sub_title: "通过预设好的绘画提示词进行模板式创作绘画",
              btn_text: "开始绘画",
              icon: "icon-huihua",
              clickEvent() {
                utils.checkLogin().then((isLogin) => {
                  if (!isLogin) {
                    state.loginVisible = true;
                    return;
                  }
                  router.push("/paintModel/paint");
                });
              },
            });
          }
          state.showPageCenter = true;
        }
      });
    };

    const openUrl = (url) => {
      window.open(url, "_blank");
    };

    init();

    return {
      ...toRefs(state),
      goAi,
      loginCallback,
      refresh,
      openUrl,
    };
  },
});
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  background-image: url(./home_bg.png);

  .page-center {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    min-height: 100%;
    padding-bottom: 60px;

    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 80px;
      .title {
        font-size: 45px;
        font-weight: 700;
        letter-spacing: 2px;
        .ai-text {
          padding: 0 5px;
          font-weight: bold;
          color: rgb(255, 101, 98);
          line-height: 60px;
          background: linear-gradient(
            47deg,
            #6554ff 0%,
            #f26dbe 57.0068359375%,
            #febd7f 91.357421875%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .sub_title {
        font-size: 16px;
        margin: 30px 0;
        padding: 8px 30px;
        border-radius: 50px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #e8f5dc, #fcf0e0),
          linear-gradient(to right, red, #578aef);
      }
      .introduction {
        width: 830px;
        font-size: 16px;
        text-align: center;
        line-height: 36px;
      }
      .btn-enter {
        background: skyblue;
        border: none;
        border-radius: 50px;
        background: linear-gradient(to right, #7a6cfc, #f26dbe);
        margin-top: 40px;
        margin-bottom: 80px;
        width: 160px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        transition: all 2s linear;

        .arrow-icon {
          display: flex;
          align-items: center;
        }
      }
    }
    .card {
      border-radius: 10px;
      margin-bottom: 20px;
      .card-item {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .card-icon {
          font-size: 30px;
          margin-bottom: 30px;
        }
        .card-center {
          .title {
            font-weight: 700;
            font-size: 16px;
          }
          .sub_title {
            color: #a8a8a8;
            margin-top: 5px;
            font-size: 13px;
          }
        }
        .btn {
          border-radius: 50px;
          background: #f1ecff;
          border: none;
          color: #694fb8;
        }
      }
    }

    .additional-info {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        color: #bbb;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }
      }
    }
  }
}
</style>
